<style type="text/css">
    .title-font {
        font-weight: 300;
        font-size: 14px;
        padding: 6px 0 6px 0 !important;
        display: block;
        background-color: #67C9BA;
        color: #0D3355;
    }
    
    .title-hr {
        margin: 0;
        border-bottom: 0px;
    }
    
    .title-content {
        min-height: 190px;
        background-color: #EBF4F3;
    }
    
    .img1 {
        width: 60px;
        height: 60px;
        background-color: #333;
        color: #fff;
        position: relative;
        float: left;
        margin: 10px;
        /* margin-top: 50px; */
    }
    
    .img2 {
        width: 60px;
        height: 60px;
        background-color: #333;
        color: #fff;
        float: left;
        margin: 10px;
    }
    
    .img1:after {
        content: attr(data-num);
        /* line-height: 50px; */
        text-align: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        top: -10px;
        right: -10px;
    }
</style>
<div ng-controller="LuckydrawCtrl" ng-init="detailAction()">
    <ul class="sui-breadcrumb">
        <li><a href="#/luckydraw/list">{{'抽奖'| translate}}</a></li>
        <li>{{'详情'|translate}}</li>
        <span class="sui-form sui-form pull-right">
        </span>
    </ul>
    <div style="height:170px;background-image: url(https://img.alicdn.com/imgextra/i3/20841398/TB2ZymdXYuWBuNjSszgXXb8jVXa-20841398.jpg); background-size: 100%;background-repeat: no-repeat;">
        <div class="sui-row-fluid">
            <div class="span6 block-container" style="text-align: center;margin-top: 25px;">
                <span style="line-height: 25px;font-size: 24px;display: block;">活动人数</span>
                <span style="line-height: 110px;font-family: impact;font-size: 60px;">{{activity_number}}</span>
            </div>
            <div class="span6 block-container" style="text-align: center;margin-top: 25px;">
                <span style="line-height: 25px;font-size: 24px;display: block;">拉好友人数</span>
                <span style="line-height: 110px;font-family: impact;font-size: 60px;">{{pull_number}}</span>
            </div>
        </div>
    </div>
    <div class="sui-row-fluid" style="margin-bottom: 15px;">
        <div class="span12 block-container index-right-container" style="border: solid 1px #A0DDD4;">
            <label class="title-font">&nbsp;正在参加活动的人数</label>
            <hr class="title-hr">
            <div class="title-content">
                <div ng-repeat="value in detail_list" data-num='{{value.pull_number}}' class='{{value.pull_number==0?"img2":"img1"}}'>
                    <wxinfo ng-model="value.member_id" stye="1" is-name="1"></wxinfo>
                </div>
            </div>
        </div>
    </div>
    <div class="sui-row-fluid">
        <div class="span9 block-container index-right-container" style="border: solid 1px #A0DDD4;">
            <label class="title-font">&nbsp;排行榜</label>
            <hr class="title-hr">
            <div class="sui-row-fluid title-content">
                <div class="sui-row-fluid" ng-repeat="list in pull_people" style="margin: 15px;">
                    <div class="span1 block-container" style="text-align: center;margin-top: 20px;">
                        第{{$index+1}}名：
                    </div>
                    <div class="span1 block-container" style="text-align: center;">
                        <wxinfo ng-model="list.member_id" stye="1" is-name="1"></wxinfo>
                    </div>
                    <div class="span9 block-container" style="text-align: center;">
                        <div style="height: 20px;">
                            <span style="float: left;">
                                <wxinfo ng-model="list.member_id" stye="1" is-url="1"></wxinfo>
                            </span>
                            <span style="float: right;">拉{{list.pull_number}}人</span>
                        </div>
                        <div class="sui-progress">
                            <div style="width: {{(list.pull_number/pull_number)*100}}%;" class="bar"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="span3 block-container index-right-container" style="border: solid 1px #A0DDD4;">
            <label class="title-font">&nbsp;新人</label>
            <hr class="title-hr">
            <div class="sui-row-fluid title-content">
                <div class="sui-row-fluid title-content">
                    <div class="sui-row-fluid" ng-repeat="list in new_list">
                        <div class="span1 block-container" style="text-align: center;margin: 5px;">
                            <span class="sui-label label-success">
                            {{$index+1}}
                        </span>
                        </div>
                        <div class="span5 block-container" style="text-align: center;margin: 5px;">
                            <wxinfo ng-model="list.friend_id" stye="1" is-url="1"></wxinfo>
                        </div>
                        <div class="span4 block-container" style="text-align: center;margin: 5px;">
                            {{list.time_str}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="block-container index-right-container" style="margin-top: 15px;border: solid 1px #A0DDD4;">
        <label class="title-font">&nbsp;输入数字查询中奖排名 
            <input type="text"  placeholder="{{'中奖数字'|translate}}" ng-model="win_number">
            <button class="sui-btn btn-primary" ng-click="getWinList()">{{'search'|translate}}</button>
        </label>
        <hr class="title-hr">

        <table class="sui-table table-nobordered">
            <thead>
                <tr>
                    <th>{{'竞猜人'|translate}}</th>
                    <th>{{'竞猜数字'|translate}}</th>
                    <th>{{'差值'|translate}}</th>
                    <th>{{'竞猜时间'|translate}}</th>
                    <th>{{'是否中奖'|translate}}</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="list in winList">
                    <td>
                        <wxinfo ng-model="list.member_id" stye="1"></wxinfo>
                    </td>
                    <td>{{list.guess_number}}</td>
                    <td>
                        {{list.probability}}
                    </td>
                    <td>
                        {{list.created_time | ddtt}}
                    </td>
                    <td>
                        <toggle-switch status="list.is_win" toggle-cb="setWin(status,list.guess_id)"></toggle-switch>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>